<template>
    <div class="app-container calendar-list-container">
        <div class="filter-container">
          <globalSearchTemplate :config="globalConfig" v-model="listQuery.userId" placeholder="请选择用户" prop="userId"
                                type="select" :load="userRemoteDataUrl"></globalSearchTemplate>
          <globalSearchTemplate :config="globalConfig" v-model="listQuery.shippingId" :load="shipListRemoteDataUrl"
                                placeholder="请选择配送方式" prop="shippingId" type="select"></globalSearchTemplate>
          <globalSearchTemplate :config="globalConfig" v-model="listQuery.orderStatus" placeholder="请选择订单状态"
                                prop="orderStatus"
                                type="select"></globalSearchTemplate>
          <globalSearchTemplate :config="globalConfig" v-model="listQuery.storeId" placeholder="请选择店铺" prop="storeId"
                                type="select" :load="storeRemoteDataUrl"></globalSearchTemplate>
          <globalSearchTemplate :config="globalConfig" v-model="listQuery.startTime" type="date"
                                placeholder="开始时间"></globalSearchTemplate>
          <globalSearchTemplate :config="globalConfig" v-model="listQuery.endTime" type="date"
                                placeholder="结束时间"></globalSearchTemplate>
            <el-button class="filter-item" v-waves @click="handleSearch" icon="el-icon-search">搜索</el-button>
            <el-button  class="filter-item" v-if="subOrdersManager_btn_add" v-waves @click="handleCreate" type="primary" icon="edit">添加</el-button>
        </div>
        <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit
                  highlight-current-row style="width: 100%">
          <globalTableColumn :data="list" :loading.sync="listLoading" :key="key" :config="globalConfig" align="center"
                             label="编号" prop="serialNumber" width="150"></globalTableColumn>
          <globalTableColumn :data="list" :loading.sync="listLoading" :key="key" :config="globalConfig" align="center"
                             type="select" label="订单用户" prop="userId" :load="userRemoteDataUrl"
                             width="120"></globalTableColumn>
          <!--
<globalTableColumn :data="list" :loading.sync="listLoading" :key="key" :config="globalConfig" align="center"  type="select"
label="店铺" prop="storeId" :load="storeInfoRemoteDataUrl"></globalTableColumn>-->
          <globalTableColumn :data="list" :loading.sync="listLoading" :key="key" :config="globalConfig" align="center"
                             type="select" label="订单状态" prop="orderStatus" width="120">
          </globalTableColumn>

          <globalTableColumn :data="list" :loading.sync="listLoading" :key="key" :config="globalConfig" align="center"
                             label="配送方式" prop="shippingId" width="100" type="select"
                             :load="shipListRemoteDataUrl"></globalTableColumn>

          <globalTableColumn :data="list" :loading.sync="listLoading" :key="key" :config="globalConfig" align="center"
                             label="总运费" prop="freightTotalPrice" width="100"></globalTableColumn>
          <globalTableColumn :data="list" :loading.sync="listLoading" :key="key" :config="globalConfig" align="center"
                             label="订单金额" prop="actualAmount" width="100"></globalTableColumn>

          <globalTableColumn :data="list" :loading.sync="listLoading" :key="key" :config="globalConfig" align="center"
                             label="支付时间" prop="payDate" width="170"></globalTableColumn>
          <globalTableColumn :data="list" :loading.sync="listLoading" :key="key" :config="globalConfig" align="center"
                             label="创建时间" prop="createDate" width="170"></globalTableColumn>

            <el-table-column label="操作" width="170">
                <template slot-scope="scope">
                    <el-button v-if="subOrdersManager_btn_upd" size="small" type="success"
                               @click="handleUpdate(scope.row)">编辑
                    </el-button>
                    <el-button v-if="subOrdersManager_btn_del" size="mini" type="danger"
                               @click="handleDelete(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div v-show="!listLoading" class="pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page.sync="listQuery.page"
                           :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
                           layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="form" label-width="100px">
                            <globalFormItem :key="formKey" :config="globalConfig" label="发货备注"  v-model="form.memo"  prop="memo" placeholder="请输入发货备注"> </globalFormItem>
                            <globalFormItem :key="formKey" :config="globalConfig" label="完成日期"  v-model="form.completeDate"  prop="completeDate" placeholder="请输入完成日期"> </globalFormItem>
                            <globalFormItem :key="formKey" :config="globalConfig" label="数量"  v-model="form.quantity"  prop="quantity" placeholder="请输入数量"> </globalFormItem>
                            <globalFormItem :key="formKey" :config="globalConfig" label="配送方式名称"  v-model="form.shippingName"  prop="shippingName" placeholder="请输入配送方式名称"> </globalFormItem>
                            <globalFormItem :key="formKey" :config="globalConfig" label="配送方式"  v-model="form.shippingId"  prop="shippingId" placeholder="请输入配送方式"> </globalFormItem>
                            <globalFormItem :key="formKey" :config="globalConfig" label="状态"  v-model="form.orderStatus"  prop="orderStatus" placeholder="请输入状态"> </globalFormItem>
                            <globalFormItem :key="formKey" :config="globalConfig" label="会员"  v-model="form.userId"  prop="userId" placeholder="请输入会员"> </globalFormItem>
                            <globalFormItem :key="formKey" :config="globalConfig" label="店铺"  v-model="form.storeId"  prop="storeId" placeholder="请输入店铺"> </globalFormItem>
                            <globalFormItem :key="formKey" :config="globalConfig" label="商品sku"  v-model="form.skuId"  prop="skuId" placeholder="请输入商品sku"> </globalFormItem>
                            <globalFormItem :key="formKey" :config="globalConfig" label="现金总价格"  v-model="form.retailTotalPrice"  prop="retailTotalPrice" placeholder="请输入现金总价格"> </globalFormItem>
                            <globalFormItem :key="formKey" :config="globalConfig" label="总运费"  v-model="form.freightTotalPrice"  prop="freightTotalPrice" placeholder="请输入总运费"> </globalFormItem>
                            <globalFormItem :key="formKey" :config="globalConfig" label="实付订单金额"  v-model="form.actualAmount"  prop="actualAmount" placeholder="请输入实付订单金额"> </globalFormItem>
                            <globalFormItem :key="formKey" :config="globalConfig" label="现金价格"  v-model="form.retailPrice"  prop="retailPrice" placeholder="请输入现金价格"> </globalFormItem>
                            <globalFormItem :key="formKey" :config="globalConfig" label="运费"  v-model="form.freightPrice"  prop="freightPrice" placeholder="请输入运费"> </globalFormItem>
                            <globalFormItem :key="formKey" :config="globalConfig" label="订单"  v-model="form.orderId"  prop="orderId" placeholder="请输入订单"> </globalFormItem>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel('form')">取 消</el-button>
                <el-button v-if="dialogStatus=='create'" type="primary" @click="create('form')">确 定</el-button>
                <el-button v-else type="primary" @click="update('form')">修 改</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<style scoped>
    .filter-item {
        margin-left:10px;
    }
</style>

<script>
    import {fetchList, getObj, addObj, putObj, delObj, casObj} from '@/api/order/subOrders'
    import waves from '@/directive/waves/index.js' // 水波纹指令
    import {mapGetters} from 'vuex'
    import {globalNotify} from '@/util/notifyUtils'  //弹窗
    import {getToken} from "@/util/auth";
    import globalSearchTemplate from '@/components/global-el-search-template'
    import globalTableColumn from '@/components/global-el-table-column'
    import globalFormItem from '@/components/global-el-form-item'

    export default {
        name: 'subOrders',
        components: { globalSearchTemplate,globalTableColumn,globalFormItem },
        directives: {
            waves
        },
        data() {
            return {
                globalConfig:{
                    module:["order"],
                    componentName:["subOrders"]
                },
                list: null,
                total: null,
                listLoading: true,
                listQuery: {
                    page: 1,
                    limit: 20,
                    "startTime":undefined,
                    "endTime":undefined,
                        "memo": undefined,
                        "completeDate": undefined,
                        "quantity": undefined,
                        "shippingName": undefined,
                        "shippingId": undefined,
                        "orderStatus": undefined,
                        "userId": undefined,
                        "storeId": undefined,
                        "skuId": undefined,
                        "retailTotalPrice": undefined,
                        "freightTotalPrice": undefined,
                        "actualAmount": undefined,
                        "retailPrice": undefined,
                        "freightPrice": undefined,
                        "orderId": undefined,
                },
                rules: {},
                form: {
                            "memo": undefined,
                            "completeDate": undefined,
                            "quantity": undefined,
                            "shippingName": undefined,
                            "shippingId": undefined,
                            "orderStatus": undefined,
                            "userId": undefined,
                            "storeId": undefined,
                            "skuId": undefined,
                            "retailTotalPrice": undefined,
                            "freightTotalPrice": undefined,
                            "actualAmount": undefined,
                            "retailPrice": undefined,
                            "freightPrice": undefined,
                            "orderId": undefined,
                },
                dialogFormVisible: false,
                dialogStatus: '',
                    subOrdersManager_btn_add: false,
                    subOrdersManager_btn_upd: false,
                    subOrdersManager_btn_del: false,
                textMap: {
                    update: '编辑',
                    create: '创建'
                },
                tableKey: 0,
                headers: {
                    Authorization: 'Bearer ' + getToken()
                },
                casDataUrl: casObj,
                key: '',
                formKey: ''
            }
        },
        computed: {
            ...mapGetters([
                'permissions'
            ])
        },
        filters: {

        },
        created() {
            this.getList()
            this.subOrdersManager_btn_add = this.permissions['subOrdersManager_btn_add']
            this.subOrdersManager_btn_upd = this.permissions['subOrdersManager_btn_upd']
            this.subOrdersManager_btn_del = this.permissions['subOrdersManager_btn_del']
        },
        methods: {
            getList() {
                this.listLoading = true
                fetchList(this.listQuery).then(response => {
                    this.list = response.data.data.records
                    this.refreshTable()
                    this.total = response.data.data.total
                    this.listLoading = false
                }
            )
            },
            handleSizeChange(val) {
                this.listQuery.limit = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.listQuery.page = val
                this.getList()
            },
            handleDelete(row) {
                delObj(row.id)
                        .then(response => {
                    this.dialogFormVisible = false
                    this.getList()
                    globalNotify(this,response)
                }
            )
            },
            handleCreate() {
                this.dialogStatus = 'create'
                this.dialogFormVisible = true
                this.resetForm()
                this.refreshForm()
            },
            refreshTable() {
                this.key = new Date().getTime()
            },
            refreshForm() {
                this.formKey = new Date().getTime()
            },
            handleUpdate(row) {
                this.resetForm()
                getObj(row.id).then(response => {
                    this.form = response.data.data;
                    this.refreshForm()
                    this.dialogFormVisible = true;
                    this.dialogStatus = "update";
            })
                ;
            },
            create(formName) {
                const set = this.$refs
                        set[formName].validate(valid => {
                    if(valid) {
                        addObj(this.form)
                                .then((response) => {
                            this.dialogFormVisible = false
                            this.getList()
                            globalNotify(this,response)
                        }
                    )
                    } else {
                        return false
                    }
                }
            )
            },
            cancel(formName) {
                this.resetForm()
                this.dialogFormVisible = false
            },
            update(formName) {
                const set = this.$refs
                        set[formName].validate(valid => {
                    if(valid) {
                        this.dialogFormVisible = false
                        this.form.password = undefined
                        putObj(this.form).then((response) => {
                            this.dialogFormVisible = false
                            this.getList()
                            globalNotify(this,response)
                        }
                    )
                    } else {
                        return false
                    }
                }
            )
            },
            resetForm() {
                this.form = {
                            "memo": undefined,
                            "completeDate": undefined,
                            "quantity": undefined,
                            "shippingName": undefined,
                            "shippingId": undefined,
                            "orderStatus": undefined,
                            "userId": undefined,
                            "storeId": undefined,
                            "skuId": undefined,
                            "retailTotalPrice": undefined,
                            "freightTotalPrice": undefined,
                            "actualAmount": undefined,
                            "retailPrice": undefined,
                            "freightPrice": undefined,
                            "orderId": undefined,
                }
            },
            handleSearch() {
                this.listQuery.page = 1;
                this.getList();
            }
        }
    }
</script>
